<template>
  <a-modal :closable="false" v-model:visible="visibleValue" :footer="null" :width="300">
    <div class="store-text">请使用微信扫描下方二维码、或者复制下方链接到微信</div>
    <div class="store-qrcode">
      <img v-if="resultText" :src="resultReq" />
    </div>
    <div class="store-copy">
      <a-input v-model:value="resultText" disabled></a-input>
      <a-button
        v-clipboard:copy="resultText"
        v-clipboard:success="onSuccess"
        v-clipboard:error="onError"
        type="primary"
      >
        复制
      </a-button>
    </div>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRefs, computed } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'ShareShopModal',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: '',
    },
    storeUrl: {
      type: String,
      default: '',
    },
  },
  emits: ['update:visible', 'cancel'],
  computed: {
    visibleValue: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      },
    },
  },
  setup(props) {
    const state = reactive({
      storeUrl: props.storeUrl,
    });

    const resultText = computed(() => {
      let text = props.text;
      // 小白转义字符
      text = text.replace(/%26/g, '&');
      if (props.text.startsWith('http://') || props.text.startsWith('https://')) {
        return text;
      }
      // console.log(`${state.storeUrl}${text}`)
      return `${state.storeUrl}${text}`;
    });

    const resultReq = computed(() => {
      let textStr = `${state.storeUrl}${props.text}`;
      if (props.text.startsWith('http://') || props.text.startsWith('https://')) {
        textStr = escape(props.text);
      }
      // console.log(`${process.env.VUE_APP_API_BASE_URL}/plusadmin/shopManager/getQrCode?url=${textStr}`)

      return `${process.env.VUE_APP_API_BASE_URL}/plusadmin/shopManager/getQrCode?url=${textStr}`;
    });

    const onSuccess = () => {
      message.success('复制成功', 1);
    };
    const onError = () => {
      message.error('复制失败：您的浏览器不支持');
    };
    return {
      props,
      onSuccess,
      onError,
      ...toRefs(state),
      resultText,
      resultReq,
    };
  },
});
</script>
<style lang="less" scoped>
.store-text {
  width: 100%;
  text-align: center;
}
.store-qrcode {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  img {
    width: 200px;
    height: 200px;
  }
}
.store-copy {
  display: flex;
  :deep(.ant-btn) {
    margin-left: -3px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}
</style>
